<br>
<tabset class="click-order" #clickOrderActivityAdd>
    <!--基础信息  -->
    <tab heading="基础信息" (select)="selectClickOrderType(1)">
        <div class="main click-order-activity-1">
            <div class="modal-line">
                <span style="color: red;">*</span>
                <span class="modal-line-title">活动名称</span>
                <input type="text" class="form-control inp" [(ngModel)]="basicInfoModel.activityName">
            </div>
            <div class="modal-line">
                <span style="color: red;">*</span>
                <span class="modal-line-title">分享标题</span>
                <input type="text" class="form-control inp" [(ngModel)]="basicInfoModel.shareTitle">
            </div>
            <div class="modal-line">
                <span style="color: red;">*</span>
                <span class="modal-line-title">分享描述</span>
                <input type="text" class="form-control inp" [(ngModel)]="basicInfoModel.shareDesicription">
            </div>
            <div class="modal-line">
                <span style="color: red;">*</span>
                <span class="modal-line-title">分享缩略图</span>
                <div style="display: inline-block;">
                    <a class="action-btn">选择
                        <input type="file" value="上传图片" class="inputFile" ng2FileSelect id="homePage-uploader" [uploader]="shareImageUpload" (change)="selectedFileOnChanged($event, shareImageUpload)" />
                    </a>
                    <button class="action-btn" (click)="uploadFile(shareImageUpload, 'shareImageUpload')">上传</button>
                </div>
            </div>
            <div class="modal-line">
                <span style="opacity: 0;">*</span>
                <span class="modal-line-title"></span>
                <div class="modal-img">
                    <img src="{{basicInfoModel.shareImageIdUrl}}" alt="{{basicInfoModel.shareImageIdUrl}}">
                </div>
            </div>
        </div>
    </tab>
    <!--订单选项  -->
    <tab heading="订单选项" [disabled]="clickOrderActivity2" (select)="selectClickOrderType(2)">
        <div class="main click-order-activity-2" style="width: 60%;">
            <div class="modal-line">
                <span style="color: red;">*</span>
                <span class="modal-line-title">用户可选配送时段</span>
                <span *ngFor="let deliveryTime of deliveryTimeList">
                    <input type="checkbox" id="{{deliveryTime.deliveryTimeId}}" [(ngModel)]="deliveryTime.isChecked">
                    <label for="{{deliveryTime.deliveryTimeId}}">{{deliveryTime.deliveryTime}}</label>
                </span>
            </div>
            <div class="modal-line">
                <span style="color: red;">*</span>
                <span class="modal-line-title">用户可选支付方式</span>
            </div>
            <p style="color: #FF5918;">*请至少勾选1项，请不要只勾选微信支付，用户在非微信环境将无支付方式可选。排序请勿重复。</p>
            <div class="click-order-activity-2">
                <div class="grid-header">
                    <div class="grid-title" *ngFor="let column of columns">{{column.title}}</div>
                </div>
                <div class="grid-container">
                    <div class="grid-item" *ngFor="let row of payTypeList">
                        <div class="grid-itemInfo"><input class="form-control" type="text" [(ngModel)]="row.sort" ></div>
                        <div class="grid-itemInfo">{{row.name}}</div>
                        <div class="grid-itemInfo"><input type="checkbox" [(ngModel)]="row.isChecked"></div>
                    </div>
                </div>
            </div>
        </div>
    </tab>
    <!--活动限制  -->
    <tab heading="活动限制" [disabled]="clickOrderActivity3" (select)="selectClickOrderType(3)">
        <div class="main click-order-activity-3">
            <div class="modal-line">
                <span style="color: red;">*</span>
                <span class="modal-line-title">是否新客专享</span>
                <input type="radio" 
                    id="click-order-activity-3-isOk" 
                    name="click-order-activity-3-is" 
                    value="0" 
                    [(ngModel)]="activityLimitModel.isNewGuest">&nbsp;&nbsp;<label for="click-order-activity-3-isOk">是</label>
                <input 
                    type="radio" 
                    id="click-order-activity-3-isNo" 
                    name="click-order-activity-3-is" 
                    value="1" 
                    [(ngModel)]="activityLimitModel.isNewGuest">&nbsp;&nbsp;<label for="click-order-activity-3-isNo">否</label> &nbsp;&nbsp;
                <span style="color: #FF5918;">*用于拉新的活动，请确认新客专享=是。</span>
            </div>
            <div class="modal-line">
                <span style="color: red;">*</span>
                <span class="modal-line-title">活动总共卖多少份</span>
                <input type="text" class="form-control inp" [(ngModel)]="activityLimitModel.totalLimit">&nbsp;单 &nbsp;&nbsp;
                <span style="color: #FF5918;">*此活动订单总数上线，订单状态非取消的，算1单，已取消的不计数。</span>
            </div>
            <div class="modal-line">
                <span style="color: red;">*</span>
                <span class="modal-line-title">每用户每日限单数</span>
                <input type="text" class="form-control inp" [(ngModel)]="activityLimitModel.userDayLimit">&nbsp;单 &nbsp;&nbsp;
                <span style="color: #FF5918;">*每个我厨注册账号，每天（自然日）最多可下的活动订单数量上限，已取消的不计。</span>

            </div>
            <div class="modal-line">
                <span style="color: red;">*</span>
                <span class="modal-line-title">每用户活动期间限单数</span>
                <input type="text" class="form-control inp" [(ngModel)]="activityLimitModel.activityUserLimit">&nbsp;单 &nbsp;&nbsp;
                <span style="color: #FF5918;">*每个我厨注册账号，总共最多可下的活动订单数量上线，已取消的不计。</span>
            </div>
        </div>
    </tab>
    <!--活动详情  -->
    <tab heading="活动详情" [disabled]="clickOrderActivity4" (select)="selectClickOrderType(4)">
        <div class="main click-order-activity-4">
            <div class="modal-line">
                <span style="color: red;">*</span>
                <span class="modal-line-title">活动类型</span>
                <input type="radio" 
                    id="IsActivityInfo1" 
                    name="IsActivityInfo" 
                    [(ngModel)]="goodsDetailModel.activityType" 
                    value="1">&nbsp;&nbsp;
                <label for="IsActivityInfo1">单品活动</label>
                <input 
                    type="radio" 
                    id="IsActivityInfo2" 
                    name="IsActivityInfo" 
                    [(ngModel)]="goodsDetailModel.activityType" 
                    value="2">&nbsp;&nbsp;
                <label for="IsActivityInfo2">多品活动</label>
            </div>
            <!--单品活动  -->
            <div *ngIf="goodsDetailModel.activityType === '1'">
                <div class="modal-line click-order-search">
                    <span style="color: red;">*</span>
                    <span class="modal-line-title">选择活动商品</span>
                    <input type="text" 
                        #searchFor1 
                        class="form-control inp" 
                        placeholder="输入活动商品名称/id搜索" 
                        (focus)="IsActivitySingle = true"
                        (blur)="IsActivitySingle = false"
                        (keyup)="searchListFunc(searchFor1.value, 1)"
                        [(ngModel)]="singleActivity">
                </div>
                <div class="modal-line click-order-search" *ngIf="IsActivitySingle">
                    <span class="click-order-search-opacity" style="color: red;">*</span>
                    <span class="modal-line-title click-order-search-opacity">选择活动商品</span>
                    <ul class="click-order-search-list click-order-search-multiList">
                        <li *ngFor="let goods of goodsSearchList1" (mousedown)="addListFunc(goods.goodsName, 1, goods.goodsId)">
                            &nbsp;&nbsp;<span>id = {{goods.goodsId}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                            <span>{{goods.goodsName}}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <!--多品活动  -->
            <div *ngIf="goodsDetailModel.activityType === '2'">
                <div class="modal-line">
                    <span style="color: red;">*</span>
                    <span class="modal-line-title">页面头图</span>
                    <div style="display: inline-block;">
                        <a class="action-btn">选择
                            <input type="file" 
                                value="上传图片" 
                                class="inputFile" 
                                ng2FileSelect 
                                id="homePage-uploader" 
                                [uploader]="headImageIdUpload" 
                                (change)="selectedFileOnChanged($event, headImageIdUpload)" />
                        </a>
                        <button class="action-btn" (click)="uploadFile(headImageIdUpload, 'headImageIdUpload')">上传</button>
                    </div>
                </div>
                <div class="modal-line">
                    <span style="opacity: 0;">*</span>
                    <span class="modal-line-title"></span>
                    <div class="modal-img head-Image">
                        <p style="color: #FF5918;">*多品活动落地页示例图，下载APP浮层系统自动添加</p>
                        <img style="height: 90%;" src="{{goodsDetailModel.headImageIdUrl}}" alt="{{goodsDetailModel.headImageIdUrl}}">
                    </div>
                </div>
                <div class="modal-line click-order-search">
                    <span style="color: red;">*</span>
                    <span class="modal-line-title">选择活动商品</span>
                    <input type="text" 
                        #searchFor2 
                        class="form-control inp" 
                        placeholder="输入活动商品名称/id搜索" 
                        (focus)="mutliSearch(searchFor2.value)"
                        (blur)="IsActivityMultiple = false"
                        (keyup)="searchListFunc(searchFor2.value, 2)"
                        [(ngModel)]="multipleActivitySearch">
                </div>
                <div class="modal-line click-order-search" *ngIf="IsActivityMultiple">
                    <span class="click-order-search-opacity" style="color: red;">*</span>
                    <span class="modal-line-title click-order-search-opacity">选择活动商品</span>
                    <ul class="click-order-search-list click-order-search-multiList">
                        <li *ngFor="let goods of goodsSearchList2">
                            <span style="color: #279f00;" *ngIf="goods.active">已添加</span>
                            <button class="action-btn" (mousedown)="addListFunc(goods.goodsName, 2, goods.goodsId)" *ngIf="!goods.active">添加</button>
                            &nbsp;&nbsp;<span>id = {{goods.goodsId}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                            <span>{{goods.goodsName}}</span>
                        </li>
                    </ul>
                </div>
                <br>
                <div class="modal-line" style="width: 60%;">
                    <div class="grid-header">
                        <div class="grid-title" *ngFor="let column of multipleActivityColumns">{{column.title}}</div>
                    </div>
                    <div class="grid-container">
                        <div class="grid-item" *ngFor="let row of multipleActivity">
                            <div class="grid-itemInfo"><input class="form-control" type="text" [(ngModel)]="row.sort"></div>
                            <div class="grid-itemInfo">{{row.goodsName}}</div>
                            <div class="grid-itemInfo"><button class="btn btn-danger" (click)="deleteListItem(row.goodsId)">删除</button></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </tab>
</tabset>
<div class="click-order-bottom">
    <button class="confirm-btn modal-line-add" (click)="saveClickOrder()">保存</button>
</div>
<br>
<br>